<template>
<div class="sidebar-item">
    <el-submenu v-if="item.children" :index="item.path">
        <template slot="title">
            <i :class="`iconfont ${item.icon}`"></i>
            <!-- {{item.name}} -->
        </template>
        <template v-for="(sub, n) in item.children">
            <sidebar-item v-if="sub.children" :item="sub" :key="n" />
            <el-menu-item v-else :key="sub.path" :index="sub.path">
                <i :class="`iconfont ${sub.icon}`"></i>
                {{sub.name}}
            </el-menu-item>
        </template>
    </el-submenu>
    <template v-else>
        <el-menu-item class="wrap-menu-item" :index="item.path">
            <i :class="`iconfont ${item.icon}`"></i>
            <span slot="title">{{item.name}}</span>
        </el-menu-item>
    </template>
</div>
</template>

<script>
export default {
    name: 'SidebarItem',
    props: {
        item: {
            type: Object,
            required: true
        }
    }
}
</script>
<style lang="less">
.sidebar-item {
    .is-active {
        background: #2680eb !important;
    }
    .el-tooltip {
        display: flex !important;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        &:focus {
            outline: none !important;
        }
    }
    .wrap-menu-item, .el-submenu__title {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        i {
            width: 20px;
            height: 20px;
            padding: 0;
            display: flex;
            align-items: center;
        }
        .el-submenu__icon-arrow {
            display: none;
        }
    }
}
</style>
